<template>
  <el-header class="header">
    <!-- 左侧标题 -->
    <div class="logo">
      <p class="logo-lg">学生画像综合管理系统</p>
    </div>

    <!-- 搜索栏 -->
    <div class="nav-actions">
      <el-button icon="Search" circle class="search-icon"></el-button>
      <el-input v-model="searchQuery" placeholder="请输入内容" class="search-input" />

      <!-- 用户信息 -->
      <div class="user-info">
        <el-dropdown>
          <div class="user-info-dropdown">
            <el-avatar :src="avatarUrl" size="default" />
            <p class="user-name">{{ userName }}</p>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="acma">账号管理</el-dropdown-item>
              <el-dropdown-item>切换单位/角色</el-dropdown-item>
              <!-- <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item> -->
              <el-dropdown-item divided @click="logout">退出账号</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import AccountManagement from '../views/account/AccountManagement.vue';

const router = useRouter();

// 定义响应式变量
const searchQuery = ref('');
const avatarUrl = ref(''); // 保存头像 URL
const userName = ref(''); // 保存用户名

// 从 localStorage 获取用户信息
const fetchUserInfoFromLocalStorage = () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'));
    if (userInfo) {
      avatarUrl.value = userInfo.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
      userName.value = userInfo.name || 'Guest';
    } else {
      console.error('User info not found in localStorage');
    }
  } catch (error) {
    console.error('Failed to parse user info from localStorage:', error);
  }
};
//账号管理
const acma = () => {
  router.push('/AccountManagement');
}

// 退出登录
const logout = () => {
  // 清除 localStorage 中的用户信息
  localStorage.removeItem('pz_userInfo');
  localStorage.removeItem('pz_token');

  // 通过 Vue Router 跳转到登录页面
  router.push('/login'); // 确保登录页的路由名称是 'login'
};

// 在组件挂载时从 localStorage 读取数据
onMounted(() => {
  fetchUserInfoFromLocalStorage();
});
</script>



<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #409eff;
  color: #fff;
  padding: 10px 20px;

  .logo {
    display: flex;
    align-items: center;

    .logo-lg {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #000;
      margin-left: 10px;
    }
  }

  .nav-actions {
    display: flex;
    align-items: center;

    .search-icon {
      margin-right: 8px;
    }

    .search-input {
      width: 180px;
      margin-right: 15px;
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    .user-info-dropdown {
      display: flex;
      align-items: center;
      cursor: pointer;

      .el-avatar {
        margin-right: 8px;
      }

      .user-name {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        margin-right: 10px;
      }
    }
  }
}
</style>
